<template>
  <el-dialog :visible="visible"
             title="设置"
             width="670px"
             :before-close="handleClose">
    <div class="form-wrapper">
      <el-form ref="ruleForm"
               label-width="100px"
               inline
               :model="degreeDatas"
               :rules="rules">
        <el-form-item label="最高温度值"
                      prop="maxTemperature">
          <div class="row-wrapper">
            <el-input v-model="degreeDatas.maxTemperature"
                      type="number"
                      :max="maxHumidityNumber"
                      :min="minTemperatureNumber"></el-input>
            <span>℃</span>
          </div>
        </el-form-item>
        <el-form-item label="最低温度值"
                      prop="minTemperature">
          <div class="row-wrapper">
            <el-input v-model="degreeDatas.minTemperature"
                      type="number"
                      :max="maxHumidityNumber"
                      :min="minTemperatureNumber"></el-input>
            <span>℃</span>
          </div>
        </el-form-item>
        <el-form-item v-if="humidityData"
                      label="最高湿度值"
                      prop="maxHumidity">
          <div class="row-wrapper">
            <el-input v-model="degreeDatas.maxHumidity"
                      type="number"
                      :max="maxHumidityNumber"
                      :min="minTemperatureNumber"></el-input>
            <span>%RH</span>
          </div>
        </el-form-item>
        <el-form-item v-if="humidityData"
                      label="最低湿度值"
                      prop="minHumidity">
          <div class="row-wrapper">
            <el-input v-model="degreeDatas.minHumidity"
                      type="number"
                      :max="maxHumidityNumber"
                      :min="minTemperatureNumber"></el-input>
            <span>%RH</span>
          </div>
        </el-form-item>
      </el-form>
      <div class="operator">
        <el-button type="default"
                   @click="handleClose">取消</el-button>
        <el-button type="primary"
                   @click="submit('ruleForm')">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { regExpConfig } from '@/libs/regular'
import { order } from "@/api/index";
const maxTemperatureNumber = 70 // 最高温度
const minTemperatureNumber = -40  // 最低温度
const maxHumidityNumber = 100 // 最高湿度
const minHumidityNumber = 0 // 最低湿度
export default {
  name: "SetThreshold",
  props: {
    visible: {
      type: Boolean,
      default: () => false
    },
    orderId: {
      type: Number,
      default: () => ''
    },
    degreeData: {
      type: Object,
      default: () => { }
    },
    humidityData: {
      type: [Object, Array],
      default: () => []
    }
  },
  data () {
    const checkMaxTemperatureNumber = (rule, value, callback) => {
      if (value || value === 0) {
        if (!regExpConfig.temperature.test(value)) {
          callback(new Error(`值在${minTemperatureNumber}和${maxTemperatureNumber}之间，只支持1位小数`))
        }
        const maxTemperature = parseFloat(value)
        const minTemperature = parseFloat(this.degreeDatas.minTemperature)
        if (minTemperature && minTemperature >= maxTemperature) {
          callback(new Error('值不能低于等于最低温度值'))
        }
        callback()
      } else {
        callback()
      }
    }
    const checkMinTemperatureNumber = (rule, value, callback) => {
      if (value) {
        if (!regExpConfig.temperature.test(value)) {
          callback(new Error(`值在${minTemperatureNumber}和${maxTemperatureNumber}之间，只支持1位小数`))
        }
        const maxTemperature = parseFloat(this.degreeDatas.maxTemperature)
        const minTemperature = parseFloat(value)
        if (maxTemperature && maxTemperature <= minTemperature) {
          callback(new Error('值不能高于等于最高温度值'))
        }
        callback()
      } else {
        callback()
      }
    }
    const checkMaxHumidityNumber = (rule, value, callback) => {
      if (value || value === 0) {
        if (!regExpConfig.humidity.test(value)) {
          callback(new Error(`值在${minHumidityNumber}和${maxHumidityNumber}之间，只支持1位小数`))
        }
        const minHumidity = Number(this.degreeDatas.minHumidity)
        const maxHumidity = Number(value)
        if (minHumidity && minHumidity >= maxHumidity) {
          callback(new Error('值不能低于等于最低湿度值'))
        }
        callback()
      } else {
        callback()
      }
    }
    const checkMinHumidityNumber = (rule, value, callback) => {
      if (value) {
        // 如果值通过正则验证
        if (!regExpConfig.humidity.test(value)) {
          callback(new Error(`值在${minHumidityNumber}和${maxHumidityNumber}之间，只支持1位小数`))
        }
        // 转化成功为数值， 失败为NaN
        const maxHumidity = Number(this.degreeDatas.maxHumidity)
        const minHumidity = Number(value)
        // 如果值等于或高于
        if (maxHumidity && maxHumidity <= minHumidity) {
          callback(new Error('值不能高于等于最高湿度值'))
        }
        callback()
      } else {
        callback()
      }
    }
    return {
      degreeDatas: {},
      maxTemperatureNumber,
      minTemperatureNumber,
      maxHumidityNumber,
      minHumidityNumber,
      rules: {
        maxTemperature: [{ validator: checkMaxTemperatureNumber, trigger: 'blur' }],
        minTemperature: [{ validator: checkMinTemperatureNumber, trigger: 'blur' }],
        maxHumidity: [{ validator: checkMaxHumidityNumber, trigger: 'blur' }],
        minHumidity: [{ validator: checkMinHumidityNumber, trigger: 'blur' }]
      },
    }
  },
  mounted () {
    this.degreeDatas = JSON.parse(JSON.stringify(this.degreeData))
  },
  methods: {
    // 关闭当前弹窗
    handleClose () {
      this.$emit('close')
    },
    submit (ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          this.updateThreshold()
        } else {
          return false
        }
      })
    },
    // 修改温湿度接口
    async updateThreshold () {
      for (const i in this.degreeDatas) {
        if (this.degreeDatas[i]) this.degreeDatas[i] = parseFloat(this.degreeDatas[i])
      }
      console.log(this.degreeDatas);
      let data = {
        orderId: this.orderId,
        ...this.degreeDatas
      }
      let res = await order.setTemperatureHumidity(data)
      let { code, message } = res
      if (code === 0) {
        this.$emit('refresh', this.degreeDatas)
        this.$message.success(message)
      } else {
        this.$message({
          type: 'warning',
          message: message
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form-wrapper {
  padding-top: 20px;
  box-sizing: border-box;
  width: 100%;
}
.operator {
  width: 100%;
  padding: 20px 30px;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
}
.row-wrapper {
  display: flex;
  span {
    margin-left: 20px;
    display: inline-block;
    width: 60px;
  }
}
/deep/ .el-input {
  width: 100px;
}
/deep/ .el-form-item {
  margin: 0 20px 34px 0;
}
/deep/ .el-form-item__error {
  width: 213px;
}
/deep/ input[type="number"]::-webkit-inner-spin-button,
/deep/ input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
/**
 * 解决el-input设置类型为number时，中文输入法光标上移问题
 **/
/deep/ .el-input__inner {
  line-height: 1px !important;
}
</style>